<template>
    <ContentWrap>
        <CardTitle title="DynamicComponent 使用" />
        <code class="code-block mt-20px" >
            &lt;DynamicComponent :is="currentComponent" v-bind="currentProps" /&gt;<br/>
            &lt;DynamicComponent :component="componentConfig" /&gt;<br/>
            &lt;DynamicComponent :is="'EButton'" :type="'primary'"&gt;动态按钮&lt;/DynamicComponent&gt;
        </code>
        <CardTitle title="DynamicComponent 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const currentComponent = ref('EButton')
const currentProps = ref({
    type: 'primary',
    size: 'default'
})

const componentConfig = ref({
    is: 'EButton',
    props: {
        type: 'success'
    },
    slots: {
        default: '配置组件'
    }
})

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="DynamicComponent 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>is</td> 
                    <td>String/Component</td>
                    <td>-</td>
                    <td>要渲染的组件</td>
                </tr>
                <tr>
                    <td>component</td>
                    <td>Object</td>
                    <td>-</td>
                    <td>组件配置对象</td>
                </tr>
                <tr>
                    <td>props</td>
                    <td>Object</td>
                    <td>-</td>
                    <td>传递给组件的属性</td>
                </tr>
                <tr>
                    <td>slots</td>
                    <td>Object</td>
                    <td>-</td>
                    <td>插槽内容</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="DynamicComponent 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>基础用法</h4>
                <div class="component-selector">
                    <label>选择组件:</label>
                    <select v-model="selectedComponent" @change="changeComponent">
                        <option value="EButton">按钮 (EButton)</option>
                        <option value="Search">搜索 (Search)</option>
                        <option value="InputPassword">密码输入 (InputPassword)</option>
                        <option value="Icon">图标 (Icon)</option>
                    </select>
                </div>
                <div class="dynamic-demo">
                    <DynamicComponent 
                        :is="selectedComponent" 
                        v-bind="dynamicProps" 
                        @click="handleDynamicClick"
                        @search="handleDynamicSearch"
                    >
                        {{ dynamicSlotContent }}
                    </DynamicComponent>
                </div>
                <div class="props-display">
                    <p><strong>当前组件:</strong> {{ selectedComponent }}</p>
                    <p><strong>当前属性:</strong> {{ JSON.stringify(dynamicProps, null, 2) }}</p>
                </div>
            </div>
            
            <div class="demo-section">
                <h4>组件配置对象</h4>
                <div class="config-controls">
                    <EButton @click="loadButtonConfig">加载按钮配置</EButton>
                    <EButton @click="loadSearchConfig">加载搜索配置</EButton>
                    <EButton @click="loadIconConfig">加载图标配置</EButton>
                    <EButton @click="loadCustomConfig">加载自定义配置</EButton>
                </div>
                <div class="dynamic-demo">
                    <DynamicComponent :component="componentConfig" />
                </div>
                <div class="config-display">
                    <pre>{{ JSON.stringify(componentConfig, null, 2) }}</pre>
                </div>
            </div>
            
            <div class="demo-section">
                <h4>动态属性演示</h4>
                <div class="attribute-controls">
                    <div class="control-group">
                        <label>按钮类型:</label>
                        <select v-model="buttonType">
                            <option value="default">默认</option>
                            <option value="primary">主要</option>
                            <option value="success">成功</option>
                            <option value="warning">警告</option>
                            <option value="danger">危险</option>
                        </select>
                    </div>
                    <div class="control-group">
                        <label>按钮大小:</label>
                        <select v-model="buttonSize">
                            <option value="small">小</option>
                            <option value="default">默认</option>
                            <option value="large">大</option>
                        </select>
                    </div>
                    <div class="control-group">
                        <label>
                            <input type="checkbox" v-model="buttonDisabled" />
                            禁用状态
                        </label>
                    </div>
                    <div class="control-group">
                        <label>按钮文本:</label>
                        <input v-model="buttonText" type="text" />
                    </div>
                </div>
                <div class="dynamic-demo">
                    <DynamicComponent 
                        is="EButton"
                        :type="buttonType"
                        :size="buttonSize"
                        :disabled="buttonDisabled"
                        @click="handleButtonClick"
                    >
                        {{ buttonText }}
                    </DynamicComponent>
                </div>
            </div>
            
            <div class="demo-section">
                <h4>组件列表渲染</h4>
                <div class="component-list">
                    <DynamicComponent 
                        v-for="(item, index) in componentList" 
                        :key="index"
                        :is="item.component"
                        v-bind="item.props"
                        @click="handleListItemClick(index, item)"
                        class="list-item"
                    >
                        {{ item.content }}
                    </DynamicComponent>
                </div>
                <div class="list-controls">
                    <EButton @click="addListItem">添加项目</EButton>
                    <EButton @click="clearList">清空列表</EButton>
                </div>
                <p class="demo-result">点击事件: {{ lastClickedItem }}</p>
            </div>
            
            <div class="demo-section">
                <h4>条件渲染</h4>
                <div class="condition-controls">
                    <label>
                        <input type="radio" v-model="renderMode" value="button" />
                        渲染按钮
                    </label>
                    <label>
                        <input type="radio" v-model="renderMode" value="search" />
                        渲染搜索
                    </label>
                    <label>
                        <input type="radio" v-model="renderMode" value="icon" />
                        渲染图标
                    </label>
                    <label>
                        <input type="radio" v-model="renderMode" value="none" />
                        不渲染
                    </label>
                </div>
                <div class="dynamic-demo">
                    <DynamicComponent 
                        v-if="renderMode !== 'none'"
                        :is="conditionalComponent"
                        v-bind="conditionalProps"
                    >
                        {{ conditionalContent }}
                    </DynamicComponent>
                    <p v-else class="no-render">未选择任何组件</p>
                </div>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// 基础动态组件
const selectedComponent = ref('EButton')
const dynamicProps = ref({
    type: 'primary'
})
const dynamicSlotContent = ref('动态按钮')

// 组件配置对象
const componentConfig = ref({
    is: 'EButton',
    props: {
        type: 'primary'
    },
    slots: {
        default: '配置按钮'
    }
})

// 动态属性演示
const buttonType = ref('primary')
const buttonSize = ref('default')
const buttonDisabled = ref(false)
const buttonText = ref('动态属性按钮')

// 组件列表
const componentList = ref([
    {
        component: 'EButton',
        props: { type: 'primary' },
        content: '按钮 1'
    },
    {
        component: 'EButton',
        props: { type: 'success' },
        content: '按钮 2'
    },
    {
        component: 'Icon',
        props: { icon: 'ep:star', size: 20 },
        content: ''
    }
])

// 条件渲染
const renderMode = ref('button')
const lastClickedItem = ref('')

const conditionalComponent = computed(() => {
    switch (renderMode.value) {
        case 'button':
            return 'EButton'
        case 'search':
            return 'Search'
        case 'icon':
            return 'Icon'
        default:
            return 'div'
    }
})

const conditionalProps = computed(() => {
    switch (renderMode.value) {
        case 'button':
            return { type: 'warning' }
        case 'search':
            return { placeholder: '条件渲染搜索' }
        case 'icon':
            return { icon: 'ep:magic-stick', size: 24 }
        default:
            return {}
    }
})

const conditionalContent = computed(() => {
    switch (renderMode.value) {
        case 'button':
            return '条件按钮'
        case 'search':
            return ''
        case 'icon':
            return ''
        default:
            return '默认内容'
    }
})

// 方法
const changeComponent = () => {
    switch (selectedComponent.value) {
        case 'EButton':
            dynamicProps.value = { type: 'primary' }
            dynamicSlotContent.value = '动态按钮'
            break
        case 'Search':
            dynamicProps.value = { placeholder: '请输入搜索内容' }
            dynamicSlotContent.value = ''
            break
        case 'InputPassword':
            dynamicProps.value = { placeholder: '请输入密码' }
            dynamicSlotContent.value = ''
            break
        case 'Icon':
            dynamicProps.value = { icon: 'ep:search', size: 20 }
            dynamicSlotContent.value = ''
            break
    }
}

const loadButtonConfig = () => {
    componentConfig.value = {
        is: 'EButton',
        props: {
            type: 'primary',
            size: 'large'
        },
        slots: {
            default: '配置按钮'
        }
    }
}

const loadSearchConfig = () => {
    componentConfig.value = {
        is: 'Search',
        props: {
            placeholder: '配置搜索框',
            showButton: true
        },
        slots: {}
    }
}

const loadIconConfig = () => {
    componentConfig.value = {
        is: 'Icon',
        props: {
            icon: 'ep:setting',
            size: 32,
            color: '#409EFF'
        },
        slots: {}
    }
}

const loadCustomConfig = () => {
    componentConfig.value = {
        is: 'EButton',
        props: {
            type: 'danger',
            size: 'small',
            disabled: false
        },
        slots: {
            default: '自定义配置'
        }
    }
}

const handleDynamicClick = () => {
    console.log('动态组件点击事件')
}

const handleDynamicSearch = (value: string) => {
    console.log('动态组件搜索:', value)
}

const handleButtonClick = () => {
    console.log('属性演示按钮点击')
}

const handleListItemClick = (index: number, item: any) => {
    lastClickedItem.value = `第 ${index + 1} 项: ${item.component} - ${item.content}`
}

const addListItem = () => {
    const types = ['primary', 'success', 'warning', 'danger']
    const randomType = types[Math.floor(Math.random() * types.length)]
    componentList.value.push({
        component: 'EButton',
        props: { type: randomType },
        content: `按钮 ${componentList.value.length + 1}`
    })
}

const clearList = () => {
    componentList.value = []
    lastClickedItem.value = ''
}

// 初始化
changeComponent()
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    .demo-result {
        margin: 15px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
    }
}

.component-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    
    select {
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
}

.dynamic-demo {
    padding: 20px;
    border: 2px dashed #409EFF;
    border-radius: 6px;
    margin: 15px 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f9ff;
}

.props-display {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    
    p {
        margin: 5px 0;
        font-size: 14px;
        font-family: monospace;
    }
}

.config-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.config-display {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    
    pre {
        margin: 0;
        font-size: 12px;
        color: #666;
        white-space: pre-wrap;
        word-break: break-all;
    }
}

.attribute-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    
    .control-group {
        display: flex;
        align-items: center;
        gap: 5px;
        
        label {
            font-size: 14px;
            white-space: nowrap;
        }
        
        select, input[type="text"] {
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        
        input[type="checkbox"] {
            margin-right: 5px;
        }
    }
}

.component-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    min-height: 50px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fafafa;
    
    .list-item {
        margin: 0;
    }
}

.list-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.condition-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    
    label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        cursor: pointer;
        
        input[type="radio"] {
            margin-right: 5px;
        }
    }
}

.no-render {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px;
}
</style> 